<template>
	<view class="team">
        <view class="team-top">
        	<image src="../../static/img/indexImg/team-bg.png" class="img-bg" mode="aspectFill"></image>
        	<view class="site">
				<view class="num">{{data.directNum || 0}}</view>
				<view class="name">{{i18n.directPush}}</view>
			</view>
			<view class="site">
				<view class="num">{{data.teamnum || 0}}</view>
				<view class="name">{{i18n.totalPeople}}</view>
			</view>
        </view>
		<view class="team-title">{{i18n.myPush}}</view>
		<view class="team-list">
			<view class="list-tab">
				<view>{{i18n.account}}</view>
				<view>{{i18n.grade}}</view>
				<view>{{i18n.teamPeople}}</view>
				<view>{{i18n.time}}</view>
			</view>
	        <view class="list" v-for="(item,index) in list" :key="index">
				<view>
					<view>{{item.account}}</view>
					<view class="status" :class="{'active':item.authentication}">{{item.authentication? i18n.verified : i18n.notCertified}}</view>
				</view>
				<view>{{item.level}}</view>
				<view>{{item.peoples}}</view>
				<view>{{item.create_time}} </view>
			</view> 
			<no-record v-if="list.length == 0"></no-record>
			<uni-load-more :status="loadStatus" v-if="list.length>0"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import NoRecord from "@/components/NoRecord.vue"
	export default {
		data() {
			return {
				data:{},
				list:[],
				page: 1,
				pageMore: false, //能否触发下一页事件
				loadStatus: 'more'
			}
		},
		components:{
			uniLoadMore,NoRecord
		},
		onShow() {
			uni.setNavigationBarTitle({
			 title: this.$t('team.myTeam')
			})
		},
		onLoad() {
			this.getMore()
		},
		//滚动条触底事件
		onReachBottom() {
			if (this.pageMore) {
				this.page++;
				this.getMore()
			}
		},
		computed: {
		    i18n() {
		    	return this.$t('team')
		    },
		},
		methods: {
			getMore() {
				if (this.page == 1 && uni.getStorageSync('teamIndex')) {
					this.data = uni.getStorageSync('teamIndex')
					this.list = this.data.list.data
				}
				this.$post('api/team/index', {
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						if (this.page == 1) {
							this.data = res.data
							this.list =  res.data.list.data
							uni.setStorageSync('teamIndex', res.data);
						} else {
							this.list.push(...res.data.list.data);
						}
						
						if (res.data.list.has_more) {
							this.pageMore = true;
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
							this.pageMore = false;
						}
					} else {
						this.$toast(res.msg)
					}
				}).catch(res => {
					this.loadStatus = 'noMore'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.team {
	}
    .team-top{
    	margin: 0 30upx;
    	width: 690upx;
    	height: 240upx;
    	position: relative;
    	padding: 40upx 20upx;
    	color: #ffffff;
		display: flex;
    	.img-bg{
    		width: 690upx;
    		height: 240upx;
    		position: absolute;
    		left: 0;
    		top: 0;
    		z-index: -1;
    	}
    	.site{
    		flex: 1;
			text-align: center;
			.num{
				margin-top: 20upx;
				font-size: 60upx;
			}
			.name{
				margin-top: 10upx;
				font-size: 28upx;
			}
    	}
    }	
	
	.team-title{
		padding: 30upx;
		font-size: 36upx;
		font-weight: bold;
	}
	.team-list{
		padding: 0upx 30upx;
		.list-tab{
			display: flex;
			align-items: center;
			font-size: 24upx;
			padding: 0upx 0upx 30upx 0;
			border-bottom: 1upx solid var(--border);
			color: var(--txt-gray-color);
			view:nth-child(1){
				flex: 1;
				text-align: left;
			}
			view:nth-child(2){
				flex: 1;
				text-align: center;
			}
			view:nth-child(3){
				flex: 1;
				text-align: center;
			}
			view:nth-child(4){
				flex: 1;
				text-align: right;
			}
		}
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 0upx;
			border-bottom: 1upx solid var(--border);
			font-size: 24upx;
			view:nth-child(1){
				flex: 1;
				text-align: left;
			}
			view:nth-child(2){
				flex: 1;
				text-align: center;
			}
			view:nth-child(3){
				flex: 1;
				text-align: center;
			}
			view:nth-child(4){
				flex: 1;
				text-align: right;
			}
		}
	}
	.status{
		text-align: left!important;
		margin-top: 10upx;
		color: #979A9F;
	}
	.active{
		color: var(--theme-color);
	}
</style>
